//获取登录信息
const login = JSON.parse(localStorage.getItem('login'))
//收藏书籍存储到浏览器
  let bookCollection = JSON.parse(localStorage.getItem('bookCollection')) || []
//获取右边书籍li
const arr = [
  ['nav_1.jpg','推荐','冯唐','生活','《活着活着就老了》收录了冯唐近年来的代表作','《活着活着就老了》'],
  ['nav_2.jpg','最热','李世强','生活','在当下时代背景下融合更多实用内容，指导我们现代人更好地交际、生活、管理及与社会和谐共处','《生活需要分寸感》'],
  ['nav_3.jpg',' 最新','三浦紫苑','生活','西餐馆学徒藤丸阳太爱慕着植物学研究员本村纱英，但纱英对植物的兴趣远超美食和人','《无爱世界》'],
  ['nav_4.jpg','最热','张岱年、程宜山','教育','《中国文化精神》以古今中外为参照，在历史的长河中对中国文化的品格','《中国文化精神》'],
  ['nav_5.jpg','推荐','檀传宝','教育','《本书分上、下两篇。上篇为主体部分，是13篇记述当代卓越教师之风范的教育随笔，下篇则为研究三位教育大家（诺丁斯、黄济、鲁洁）教育思想的学术论文','《先生之德风》'],
  ['nav_6.jpg','最新','钱穆','历史','该书论述了从远古至民国初年的中国历史演变，深入探讨了政治、经济、社会、学术、宗教和兵制等方面的内容','《国史大纲》'],
  ['nav_7.jpg','最热','吴军','科技','全书从远古科技、古代科技、近代科技和现代科技四个部分','《全球科技通史》'],
  ['nav_8.jpg','推荐','安托万·德·圣-埃克苏佩里','文学','讲述了小王子从自己星球出发前往地球的过程中，所经历的各种历险','《小王子》'],
  ['nav_9.jpg','最热','罗伯特·清崎','财经','《主要内容是讲述清崎亲身经历的财富故事，展示了“穷爸爸”和“富爸爸”截然不同的金钱观和财富观，穷人为钱工作，富人让钱为自己工作','《穷爸爸富爸爸》'],
  ['nav_10.jpg','推荐',' 布赖恩特','计算机','《深入理解计算机系统》是理解计算机系统首选书目，是10余万程序员的共同选择。卡内基-梅隆、北京大学、清华大学、上海交通大学等国内外众多知名高校选用指定教材','《深入理解计算机系统》'],
  ['nav_11.jpg','最热','睡觉会变白','娱乐','主角本是芸芸众生中普通的一员，他重生到了1997年，决心活出不一样的人生','《文艺时代》'],
  ['nav_12.jpg','最热','梁山老鬼','小说','这部作品是一部现代网络小说，讲述了主角云铮穿越成大乾王朝六皇子的故事','《无敌六皇子》']
]
//获取右边部分的书籍li
const ul = document.querySelector('.right ul')
//渲染书籍
function rendeRing(arr){
  let str = ''
  arr.forEach((item,index)=>{
      str+=`
      <li>
      <div class="state">${item[1]}</div>
        <div class="tu"><img src="./imgas/${item[0]}" alt=""></div>
        <p>
              <b>作者:</b>
              <span>${item[2]}</span>
        </p>
        <p>
          <b>分类:</b>
          <span>${item[3]}</span>
        </p>
        <p><b>详情:</b>
          <span>${item[4]}</span>
        </p>
        <p><b data-id="${index}">${item[5]}</b>
            <svg class="icon" aria-hidden="true" style="width:30px;height:30px">
              <use xlink:href="#icon-shoucang"></use>
            </svg>
        </p>
    </li>
      `
  })
  ul.innerHTML = str
}
rendeRing(arr)
//点击最新热部分显示对应的书籍
function appear(){
  let arr1 = []
  //获取最新最热那一部分的盒子
   const box = document.querySelector('main .right>.box')
   box.addEventListener('mouseover',(e)=>{
    //找到满足是A
     if(e.target.tagName==='A'){
      //有这个类就删掉给当前这个添上这个类
      document.querySelector('main .right>.box .active').classList.remove('active')
      e.target.classList.add('active')
      //满足条件就渲染
      e.target.innerHTML==='全部'?arr1=screen1(e.target.innerHTML):arr1=screen1(e.target.innerHTML,false,e.target.innerHTML)
     }
     rendeRing(arr1)
     Collection1()
   })
   //书籍类别筛选
   //获取左边部分
   const ul = document.querySelector('.left .classifiCation>ul')
   ul.addEventListener('click',(e)=>{
    if(e.target.tagName==='A'){
      //满足条件就渲染
      e.target.innerHTML==='全部'?arr1=screen1(e.target.innerHTML,true):arr1=screen1(e.target.innerHTML,true,e.target.innerHTML)
     }
     rendeRing(arr1)
     Collection1()
   })
}
appear()
//筛选
function  screen1(a,c=true,b='全部'){
  let arr1 = []
  if(c){
    if(a===b)arr1 = arr.filter(item=>{return item[3]===b})
  }else{
    if(a===b)arr1 = arr.filter(item=>{return item[1]===b})
  }
  if(a==='全部')arr1 = arr
  return arr1
}
//点击三条显示列表
function drop_down(){
  const svg = document.querySelector('main>#drop')
  const left = document.querySelector('main .left')
  svg.addEventListener('click',()=>{
    left.classList.toggle('active1')
  })
}
drop_down()

//搜索框
function Screen(){
  const ipt = document.querySelector('.top input[placeholder="关键词书名或作者"')
  let arr1 = []
  ipt.addEventListener('change',(e)=>{
    //查找只要满足输入框中其中一个字
   arr1= arr.filter(item=>{return item[2].includes(ipt.value.replace(/ /g, ''))||item[5].includes(ipt.value.replace(/ /g, ''))})
   rendeRing(arr1)
   Collection1()
  })
}
Screen()

//存储收藏的
let sumArr=[]
let c
//收藏部分
const span = document.querySelector('.top .collection span')
function Collection1(){
  const p = document.querySelectorAll('main>.right>ul>li p:last-child svg')
    let s 
    p.forEach((item,index)=>{
        item.addEventListener('click',(e)=>{
          if(login!==null){
            let arr2
          //获取s的书名
          s = document.querySelector(`main>.right>ul>li:nth-child(${index+1}) p:last-child b`).innerHTML
          arr2 = arr.find(item=>{return item[5]===s})
          //判断是否有这个#icon-shoucang字体图标
          if(item.querySelector('use').href.baseVal==='#icon-shoucang'){
             //判断sumArr数组里是否有相同的有就不进入
             if(sumArr.indexOf(arr2)===-1){
                    sumArr.push(arr2)
                    span.innerHTML = sumArr.length
                    bookCollection=sumArr
                    localStorage.setItem('bookCollection',JSON.stringify(bookCollection))
                    book(sumArr)
                    Del(sumArr)
                    item.querySelector('use').href.baseVal='#icon-xz'
              }else{
                    if(confirm('此书籍已存在您的收藏夹里,是否取消收藏')){
                      sumArr= sumArr.filter(item=>{return item[5]!==arr2[5]})
                      span.innerHTML = sumArr.length
                      bookCollection=sumArr
                      localStorage.setItem('bookCollection',JSON.stringify(bookCollection))
                      book(sumArr)
                      Del(sumArr)
                    }else{
                      item.querySelector('use').href.baseVal='#icon-xz'
                    }
                }
          }else{
                sumArr=sumArr.filter(item=>{return item[5]!==arr2[5]})
                span.innerHTML = sumArr.length
                bookCollection=sumArr
                localStorage.setItem('bookCollection',JSON.stringify(bookCollection))
                book(sumArr)
                Del(sumArr)
                item.querySelector('use').href.baseVal='#icon-shoucang'
            }
          }else{alert('请登录')}  
          })
    })
}
Collection1()
const u = document.querySelector('.top .cancel>ul')
//点击收藏显示收藏的书籍
function book(a){
  const arr2= a.map((item,index)=>{
       return `
       <li>
       <b>${item[5]}</b>
        <span>作者:${item[2]}</span>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-shoucang-yishoucang" data-id="${index}"></use>
        </svg>
     </li>
       `
    })
    u.innerHTML = arr2.join(' ')
}

//显示与隐藏收藏
function hide(){
   const box = document.querySelector('.top .collection') 
   const box1 = document.querySelector('.top .cancel') 
   const box2 = document.querySelector('.top .cancel .box') 
   const cover = document.querySelector('.cover')
   box.addEventListener('click',(event)=>{
      box1.classList.toggle('cancel_1')
      // 禁止页面滚动：
    document.body.style.overflow='hidden'
    cover.classList.toggle('cover1')
    box2.style.transform=`scale(1.3)`;
   })
   box2.addEventListener('click',()=>{
    box1.classList.toggle('cancel_1')
    // 允许页面滚动：
    document.body.style.overflow='visible'
    cover.classList.toggle('cover1')
   })
}
hide()


//删除爱心收藏里面的内容
function Del(a){
  const b =document.querySelectorAll('main>.right>ul>li p:last-child b')
  //u事件委托
    u.onclick=(e)=>{
      if(e.target.tagName==='use'){
        //获取书名
        const n = u.querySelectorAll('b')[e.target.dataset.id].innerHTML
        b.forEach(item=>{
          // 相同就给他添加#icon-shoucang
            if(item.innerHTML===n){
        item.parentNode.querySelector('svg use').href.baseVal ='#icon-shoucang'
            }
        })
            a.splice(e.target.dataset.id,1)
            span.innerHTML = a.length
            bookCollection=[]
            bookCollection.push(a)
            localStorage.setItem('bookCollection',JSON.stringify(bookCollection))
            book(a)
        }
    }
}
//登录状态
function state(){
    const a = document.querySelector('.top>.box1>a:nth-child(3)')
    if(login!==null){
      a.innerHTML = login[0].username
      a.onclick=(e)=>{e.preventDefault()}
    }
}
state()

